<template>
  <div class="news">
    <!-- 头部 -->
    <div class="header">消息中心</div>
    <!-- 第二部分 -->
    <div class="newlist">
      <!-- 每一个列表 -->
      <div class="customer" @click="Jump">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">在线客服</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
      <!-- 每一个列表 -->
      <div class="customer">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">咨询售后</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
      <!-- 每一个列表 -->
      <div class="customer">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">品牌车系</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
      <!-- 每一个列表 -->
      <div class="customer">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">品牌车系</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
      <!-- 每一个列表 -->
      <div class="customer">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">品牌车系</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
      <!-- 每一个列表 -->
      <div class="customer">
        <!-- 左边 -->
        <div class="customer-left">
          <img src="../../assets/images/news/people-female.jpg" alt="" />
        </div>
        <!-- 右边 -->
        <div class="customer-right">
          <!-- 第一行 -->
          <div class="customer-right-one">
            <div class="after">品牌车系</div>
            <div class="time">今天20:03</div>
          </div>
          <!-- 第二行 -->
          <div class="customer-right-two">请对本次服务做出评价</div>
        </div>
      </div>
    </div>

    <div class="footer">底部</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    Jump() {
      this.$router.push("/newsList");
    },
  },
};
</script>



<style lang="less" scoped>
.news {
  height: 100vh;
  background-color: #f7f7f7;
}
.header {
  height: 107px;
  width: 100%;
  background-color: white;
  line-height: 107px;
  text-align: center;
  font-size: 30px;
  color: #202020;
}
// 第二块
.newlist {
  // height: 1050px;
  // background-color: #f9f9f9;
  .customer {
    height: 128px;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    background-color: white;
    .customer-left {
      margin-left: 30px;
      margin-right: 20px;
      img {
        width: 91px;
        height: 91px;
      }
    }
    .customer-right {
      .customer-right-one {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 21px;
        .after {
          font-size: 28px;
          margin-right: 347px;
        }
        .time {
          font-size: 22px;
          color: #a1a1a1;
        }
      }
      .customer-right-two {
        font-size: 22px;
        color: #a2a2a2;
      }
    }
  }
}

.footer {
  width: 100%;
  height: 143px;
  border-top: 1px solid #ececec;
  position: fixed;
  bottom: 0px;
  font-size: 26px;
  line-height: 143px;
  text-align: center;
}
</style>